<template>
  <view class="record-area">
    <view class="content-bg">
      <u-navbar
        bgColor="transparent"
        @leftClick="navClick"
        :safeAreaInsetTop="true"
        :placeholder="true"
        :height="60"
      >
        <view slot="center" class="search-box">
          <view class="switch">
            <view class="list on">音频</view>
            <view class="list" @click="tapType">视频</view>
          </view>
        </view>
      </u-navbar>
      <!-- <view class="shi-ju">
        <image
          mode="widthFix"
          style="width: 100%"
          src="https://pics-self.oss-cn-chengdu.aliyuncs.com/%E7%94%9F%E6%88%90%E7%A3%81%E5%B8%A6%E5%9B%BE%E7%89%87%20%282%29.png"
        ></image>
      </view> -->
    </view>
    <SoundRecording @end="soundEnd" />
    <!-- <view class="lu-bg">
      <view class="btn">
        <u-icon name="mic" color="#fc7110" size="50"></u-icon>
      </view>
      <view class="txt">开始录音</view>
    </view> -->
  </view>
</template>

<script>
import { fileUpload, fileUploadPath } from '@/api/upload'
import SoundRecording from '@/components/sound-recording/sound-recording.vue'
export default {
  components: {
    SoundRecording
  },
  data() {
    return {
      content: ``
    }
  },
  onLoad() {},
  methods: {
    uploadFilePromise({ url, type, name }) {
      return new Promise((resolve, reject) => {
        const files = {
          fileName: url
        }
        fileUploadPath(files).then((res) => {
          if (res.code === 200) {
            //此示例上传参数只列举必填字段，如有其他需求可参考：
            //PostObject文档：https://help.aliyun.com/zh/oss/developer-reference/postobject
            //签名版本4文档：https://help.aliyun.com/zh/oss/developer-reference/signature-version-4-recommend
            const formData = res.data
            console.log('文件本地路径', res)
            uni.uploadFile({
              url: 'https://article-prod.oss-cn-chengdu.aliyuncs.com',
              filePath: url,
              name: 'file', //固定值为file
              formData: formData,
              success(res) {
                if (res.statusCode === 204 || res.statusCode === 200 || res.statusCode === 201) {
                  resolve({ url: 'https://article-prod.oss-cn-chengdu.aliyuncs.com/' + formData.key })
                  console.log('上传成功', res)
                } else {
                  uni.showToast({
                    title: res.msg,
                    icon: 'none',
                    duration: 3000
                  })
                }
              },
              fail(err) {
                uni.showToast({
                  title: res.msg,
                  icon: 'none',
                  duration: 3000
                })
              }
            })
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              duration: 3000
            })
          }
        })
      })
    },
    tapType() {
      this.$emit('change', 'video')
    },
    navClick() {
      uni.navigateBack()
    },
    async soundEnd(path) {
      uni.showLoading({
        mask: true,
        title: '上传中'
      })
      const { url } = await this.uploadFilePromise({ url: path })
      uni.hideLoading()
      if (url) {
        // 跳转至C页面并传递视频路径
        uni.navigateTo({
          url: `/pagesSub/du/articleR?url=${encodeURIComponent(url)}`
        })
      } else {
        uni.showToast({
          title: '上传失败，请重试',
          icon: 'none',
          duration: 3000
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
page {
  background-color: #fff;
}
.record-area {
  height: 100vh;
  background-color: #fff;
  .content-bg {
    height: 80vh;
    background: url('https://check-in.wuming-adv.info/audio.jpg') no-repeat center top;
    background-size: cover;
  }
  .switch {
    display: flex;
    width: 200rpx;
    height: 60rpx;
    background-color: #ababab;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    .list {
      flex: 1;
      text-align: center;
      height: 100%;
      border-radius: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      &.on {
        background-color: #fff;
        color: #fc7110;
      }
    }
  }
  .shi-ju {
    width: 100%;
    padding-top: 200rpx;
  }
}
.lu-bg {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 20vh;
  .btn {
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 5px #cfcfcf;
  }
  .txt {
    margin-top: 20rpx;
    color: #666;
  }
}
</style>
